<template>
  <div>
    <div class="d-flex flex-row flex-items-center">
      <span>选择大小</span>
      <div class="radio-group">
        <input
          class="radio-input"
          id="option-a"
          type="radio"
          name="options"
          :value="16"
          v-model="size"
        />
        <label class="radio-label" for="option-a">16px</label>
        <input
          class="radio-input"
          id="option-b"
          type="radio"
          name="options"
          :value="24"
          v-model="size"
        />
        <label class="radio-label" for="option-b">24px</label>
      </div>
      <span>或输入大小</span>
      <input type="number" class="form-control" :min="12" v-model="size" />
      <div class="ml-2">当前大小：{{ size }}px</div>
    </div>
    <div class="icons-container">
      <div
        v-for="icon of octicons"
        :key="icon"
        class="mt-2 cursor-pointer"
        @click="copyIcon(icon)"
      >
        <pr-icon :name="icon" :size="size"></pr-icon>
        <br />
        <span>{{ icon }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'DesignIcon',
  setup() {
    const size = ref(24);
    const octicons: string[] = [
      'alert',
      'archive',
      'arrow-both',
      'arrow-down',
      'arrow-left',
      'arrow-right',
      'arrow-switch',
      'arrow-up',
      'beaker',
      'bell',
      'bell-slash',
      'blocked',
      'bold',
      'book',
      'bookmark',
      'bookmark-slash',
      'briefcase',
      'broadcast',
      'browser',
      'bug',
      'calendar',
      'check',
      'check-circle',
      'check-circle-fill',
      'checklist',
      'chevron-down',
      'chevron-left',
      'chevron-right',
      'chevron-up',
      'circle',
      'circle-slash',
      'clippy',
      'clock',
      'code',
      'code-review',
      'code-square',
      'codescan',
      'codescan-checkmark',
      'codespaces',
      'columns',
      'comment',
      'comment-discussion',
      'container',
      'cpu',
      'credit-card',
      'cross-reference',
      'dash',
      'database',
      'dependabot',
      'desktop-download',
      'device-camera',
      'device-camera-video',
      'device-desktop',
      'device-mobile',
      'diamond',
      'diff',
      'diff-added',
      'diff-ignored',
      'diff-modified',
      'diff-removed',
      'diff-renamed',
      'dot',
      'dot-fill',
      'download',
      'duplicate',
      'ellipsis',
      'eye',
      'eye-closed',
      'file',
      'file-badge',
      'file-binary',
      'file-code',
      'file-diff',
      'file-directory',
      'file-submodule',
      'file-symlink-file',
      'file-zip',
      'filter',
      'flame',
      'fold',
      'fold-down',
      'fold-up',
      'gear',
      'gift',
      'git-branch',
      'git-commit',
      'git-compare',
      'git-merge',
      'git-pull-request',
      'git-pull-request-closed',
      'git-pull-request-draft',
      'globe',
      'grabber',
      'graph',
      'hash',
      'heading',
      'heart',
      'heart-fill',
      'history',
      'home',
      'horizontal-rule',
      'hourglass',
      'hubot',
      'image',
      'inbox',
      'infinity',
      'info',
      'issue-closed',
      'issue-draft',
      'issue-opened',
      'issue-reopened',
      'italic',
      'kebab-horizontal',
      'key',
      'key-asterisk',
      'law',
      'light-bulb',
      'link',
      'link-external',
      'list-ordered',
      'list-unordered',
      'location',
      'lock',
      'logo-gist',
      'logo-github',
      'mail',
      'mark-github',
      'markdown',
      'megaphone',
      'mention',
      'meter',
      'milestone',
      'mirror',
      'moon',
      'mortar-board',
      'multi-select',
      'mute',
      'no-entry',
      'north-star',
      'note',
      'number',
      'organization',
      'package',
      'package-dependencies',
      'package-dependents',
      'paintbrush',
      'paper-airplane',
      'pencil',
      'people',
      'person',
      'person-add',
      'pin',
      'play',
      'plug',
      'plus',
      'plus-circle',
      'project',
      'pulse',
      'question',
      'quote',
      'reply',
      'repo',
      'repo-clone',
      'repo-forked',
      'repo-pull',
      'repo-push',
      'repo-template',
      'report',
      'rocket',
      'rows',
      'rss',
      'ruby',
      'screen-full',
      'screen-normal',
      'search',
      'select-single',
      'server',
      'share',
      'share-android',
      'shield',
      'shield-check',
      'shield-lock',
      'shield-x',
      'sidebar-collapse',
      'sidebar-expand',
      'sign-in',
      'sign-out',
      'skip',
      'smiley',
      'sort-asc',
      'sort-desc',
      'square',
      'square-fill',
      'squirrel',
      'star',
      'star-fill',
      'stop',
      'stopwatch',
      'strikethrough',
      'sun',
      'sync',
      'table',
      'tag',
      'tasklist',
      'telescope',
      'terminal',
      'three-bars',
      'thumbsdown',
      'thumbsup',
      'tools',
      'trash',
      'triangle-down',
      'triangle-left',
      'triangle-right',
      'triangle-up',
      'typography',
      'unfold',
      'unlock',
      'unmute',
      'unverified',
      'upload',
      'verified',
      'versions',
      'video',
      'workflow',
      'x',
      'x-circle',
      'x-circle-fill',
      'zap'
    ];

    const copyIcon = (val: string) => {
      console.log('copy icon', val);
      copyToClipboard(`<pr-icon name="${val}" size="16"></pr-icon>`);
    };

    /**
     * 新api复制文字到剪贴板
     * @param copyText 要复制的文字
     */
    const copyToClipboard = (copyText: string): void => {
      navigator.clipboard
        .writeText(copyText)
        .then((_) => {
          alert('已复制到剪贴板' + copyText);
        })
        .catch((err) => {
          alert('复制失败');
          console.error(err);
        });
    };

    return {
      size,
      octicons,
      copyIcon
    };
  }
});
</script>

<style lang="scss" scoped>
.icons-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
</style>
